<template>
  <div>
    <h3 class="title_h3 titone">
      <span>视频列表</span>
    </h3>
    <div class="live_details" v-if="hasRoot">
      <div class="filtr_box">
        <div class="ld_search_date">
          <span
            v-for="item in fDate"
            :class="{ active: item.active }"
            :key="item.text"
            @click="checkedDateFn(item)"
          >{{ item.text }}</span>
        </div>
        <div class="shield_item" @click="shieldDeletedFn">
          <i :class="{ active: isDelete }"></i>
          <span>屏蔽已删除视频</span>
        </div>
      </div>
      <div class="search_box">
        <input
          v-model.trim="keyWords"
          @keydown.enter="keyWordsFn"
          type="text"
          placeholder="输入视频名称关键词搜索"
        />
        <i class="search_icon" @click="keyWordsFn" :class="{ active: keyWordsIsActive }"></i>
      </div>
      <div class="goods_list" v-if="!isNodata">
        <ul v-if="datas.length">
          <li v-for="(item, idx) in datas" :key="'datas2' + idx" @click="goPage(item.url)">
            <div class="li_top">
              <div class="img_box" @click="goPage(item.url)">
                <img :src="item.thum_pic" v-errorImg:video />
                <i class="play_btn"></i>
              </div>
              <div class="gl_text">
                <h5>{{ item.title }}</h5>
                <p>发布时间：{{ timestamp(item.release_time, "M-D h:m") }}</p>
              </div>
            </div>
            <div class="li_footer">
              <div class="item_data">
                <p class="strong">{{ format_time(item.duration) }}</p>
                <p>发布时长</p>
              </div>
              <div class="item_data">
                <p class="strong">{{ format_num(item.favorite_count) }}</p>
                <p>点赞数</p>
              </div>
              <div class="item_data">
                <p class="strong">{{ format_num(item.comment_count) }}</p>
                <p>评论数</p>
              </div>
              <!-- <div class="item_data">
                <strong>{{ format_num(item.comment_count) }}</strong>
                <p>销量</p>
              </div>
              <div class="item_data">
                <strong>{{ format_num(item.comment_count) }}</strong>
                <p>销售额</p>
              </div>-->
            </div>
          </li>
        </ul>
        <template v-if="!isNodata">
          <template v-if="!loading">
            <div class="more" @click="getMore" v-if="isMore">查看更多</div>
            <p class="more_no" v-else>我是有底线的~</p>
          </template>
          <van-loading class="loading" v-if="loading" type="spinner" :vertical="true" />
        </template>
      </div>
      <div class="nodata_page" v-else>
        <div class="img_box">
          <!-- <img src="@/assets/three/noData.png"> -->
          <img src="@/assets/three/noData.png" alt />
        </div>
        <p>暂无数据</p>
      </div>
    </div>
    <noPower :minLeve="$store.state.userRoot[8][43].ownerMinLevel" v-else />
    <div class="blank_holder" v-if="loading"></div>
    <div class="bott"></div>
  </div>
</template>

<script>
export default {
  props: {},
  data() {
    return {
      id: this.$route.query.id,
      datas: [], //直播详情数据
      fDate: [
        //筛选日期
        { text: '近7天', active: false },
        { text: '30天', active: true },
        { text: '90天', active: false }
      ],
      searchDates: [], //存放开始时间和结束时间
      keyWordsIsActive: false, //搜索按钮是否高亮
      keyWords: '', //搜索词
      isDelete: 0, //是否屏蔽已删除的
      sort: 'releasetime', //类型排序  //Duration 时长 , releasetime 发布时间 , FavoriteCount 点赞数 , CommentCount 评论数 , ShareCount 转发数
      orderBy: 'desc', //desc降序 asc升序
      page: 1, //页码
      size: 10, //个数
      isMore: true, //是否还有下一页
      isNodata: false,
      loading: true,
      hasRoot: true
    };
  },
  created() {
    this.fDate.forEach((item, idx) => {
      let initData = idx ? (idx == 1 ? 30 : 90) : 7;
      let dates = this.initDateInterval(initData);
      item.dates = dates;
    });
    this.searchDates = this.initDateInterval(30); //默认30天
    this.getData();
  },
  mounted() {},
  components: {},
  methods: {
    goPage(url) {
      location.href = url;
    },
    initF() {
      //重置筛选项
      this.page = 1;
      this.datas = [];
      this.isMore = true;
    },
    getData() {
      this.isNodata = false;
      this.loading = true;
      this.$axios
        .post('/api/product/SearchProAweme', {
          pro_id: this.id,
          keyword: this.trimStr(this.keyWords),
          category: 0,
          star_time: this.searchDates[0],
          end_time: this.searchDates[1],
          is_del: this.isDelete,
          size: this.size,
          page: this.page,
          order_by: this.orderBy,
          sort: this.sort
        })
        .then(res => {
          this.loading = false;
          if (res.data.code == 0) {
            if (this.page == 1) {
              //如果第一页直接赋值，其他的拼接
              this.datas = res.data.data;
            } else {
              this.datas = this.datas.concat(res.data.data);
            }

            if (this.datas.length >= res.data.count) {
              this.isMore = false;
            }
            this.page++;
          } else if (res.data.code == 1003) {
            this.hasRoot = false;
            //无权限
          } else {
            //暂无数据
            this.isNodata = true;
          }
        });
    },
    getMore() {
      //获取更多
      this.getData();
    },
    checkedDateFn(item) {
      //切换日期选项
      this.fDate.forEach(itemC => {
        itemC.active = false;
      });
      item.active = true;
      this.searchDates = item.dates;

      this.initF();
      this.getData();
    },
    keyWordsFn() {
      //输入框点击搜索
      if (this.keyWords) {
        this.initF();
        this.getData();
      }
    },
    keyWordsBlur() {
      //输入框失去焦点
      this.keyWordsIsActive = Boolean(this.keyWords);
    },
    shieldDeletedFn() {
      //屏蔽已删除
      this.isDelete = this.isDelete ? 0 : 1;
      this.initF();
      this.getData();
    }
  },
  computed: {},
  watch: {
    keyWords(newVal) {
      if (newVal == '') {
        this.keyWordsIsActive = false;
        this.initF();
        this.getData();
      } else {
        this.keyWordsIsActive = true;
      }
    }
  },
  filters: {
    setPrice(prices) {
      let maxP = (prices[0] = Number(prices[0]));
      let minP = (prices[1] = Number(prices[1]));
      if (maxP > minP) {
        return '￥' + minP + '-' + maxP;
      } else if (maxP == minP || maxP < minP) {
        return '￥' + minP;
      } else if (maxP == 0 && minP == 0) {
        return '--';
      }
    }
  }
};
</script>

<style lang="stylus" scoped>
.bott {
  width: 100%;
  height: 0.36rem;
  background-color: #f1f1f1;
}

@import './../../../common/common.styl';

.titone {
  margin: 0.6933rem 0.4rem 0;
}

.live_details {
  padding: rem(50) rem(30);

  .filtr_box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: rem(26);

    .ld_search_date {
      font-size: 0;

      span {
        display: inline-block;
        padding: rem(6) rem(14);
        background-color: #fff;
        border-radius: 4px;
        border: solid 1px #e5e5e5;
        font-size: rem(24);
        margin-right: rem(15);

        &.active {
          background-color: #fd7f2c;
          border-color: #fd7f2c;
          color: #fff;
        }
      }
    }

    .shield_item {
      font-size: 0;

      i {
        display: inline-block;
        width: rem(30);
        height: rem(30);
        background-color: #ffffff;
        border-radius: 4px;
        border: solid 1px #e5e5e5;
        vertical-align: middle;
        transition: all linear 200ms;

        &.active {
          bgp('./../../../assets/img/checked.png');
        }
      }

      span {
        display: inline-block;
        margin-left: rem(14);
        font-size: rem(26);
        color: #555;
        vertical-align: middle;
      }
    }
  }

  .ld_data {
    display: flex;
    justify-content: space-between;
    margin-top: rem(20);

    .data_item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: rem(335);
      border-radius: rem(10);
      padding: rem(17) rem(30);
      font-size: rem(28);
      background-color: #f5f5f5;
      box-sizing: border-box;

      span {
        color: #888;
      }

      .strong {
        color: #222;
        // font-family: DINPro-Medium;
      }
    }
  }

  .search_box {
    position: relative;
    box-sizing: border-box;
    height: rem(74);
    border-radius: rem(10);
    border: solid 1px #e5e5e5;
    background-color: #fff;
    padding: 0 rem(80) 0 rem(32);
    margin-top: rem(30);

    input {
      width: 100%;
      height: 100%;
      border: none;
      font-size: rem(28);
    }

    .search_icon {
      position: absolute;
      right: 0;
      top: 0;
      display: inline-block;
      width: rem(94);
      height: rem(72);
      bgp('./../../../assets/two/search-nohover.png');
      background-size: rem(30) rem(30);

      &.active {
        bgp('./../../../assets/two/search.png');
        background-size: rem(30) rem(30);
      }
    }
  }

  .goods_list {
    li {
      padding: rem(30) 0;
      border-bottom: 1px solid #e5e5e5;

      // &:last-child{
      // border-bottom none;
      // }
      .li_top {
        display: flex;
        align-items: center;

        .img_box {
          position: relative;
          flex-shrink: 0;
          width: rem(100);
          height: rem(100);
          margin-right: rem(19);
          border-radius: rem(20);
          overflow: hidden;

          img {
            width: 100%;
            height: 100%;
            object-fit: cover;
          }

          .play_btn {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            display: inline-block;
            width: rem(44);
            height: rem(44);
            bgp('./../../../assets/two/play.png');
          }
        }

        .gl_text {
          width: rem(570);

          h5 {
            font-size: rem(30);
            color: #222;
            font-weight: normal;
            omit();
          }

          p {
            font-size: rem(24);
            color: #888;
            margin-top: rem(5);
          }
        }
      }

      .li_footer {
        display: flex;
        justify-content: space-between;
        margin-top: rem(30);
        padding: 0 rem(64);

        .item_data {
          text-align: center;
          font-size: 0;

          .strong {
            font-size: rem(30);
            color: #222;
            font-family: DINPro-Medium;
          }

          p {
            font-size: rem(24);
            color: #888;
          }
        }
      }
    }

    // li:last-of-type{
    // border-bottom:none;
    // }
    .more {
      width: rem(160);
      height: rem(60);
      margin: rem(50) auto 0;
      text-align: center;
      line-height: rem(60);
      border-radius: rem(10);
      border: solid 1px #fd7f2c;
      font-size: rem(26);
      color: #fd7f2c;
    }

    .more_no {
      margin-top: rem(26);
      font-size: rem(24);
      color: #b5b5b5;
      text-align: center;
    }
  }
}

.loading {
  margin: rem(50) 0 rem(10);
}

.nodata_page {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: rem(100) 0;

  .img_box {
    width: rem(297);
    height: rem(232);

    img {
      width: 100%;
      height: 100%;
    }
  }

  p {
    font-size: rem(26);
    color: #888;
  }
}
</style>
